<template>
  <div ref="chartRef" style="height: 120px"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps<{
  value: number
}>()

const chartRef = ref<HTMLElement>()
let chart: echarts.ECharts

onMounted(() => {
  chart = echarts.init(chartRef.value!)
  
  const option = {
    series: [{
      type: 'gauge',
      radius: '90%',
      progress: {
        show: true,
        width: 12,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#36CBCB' },
            { offset: 1, color: '#1D6D9F' }
          ])
        }
      },
      axisLine: { lineStyle: { width: 12, color: [[1, '#1A2D4D']] } },
      axisLabel: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      pointer: { show: false },
      detail: {
        valueAnimation: true,
        fontSize: 24,
        color: '#fff',
        formatter: '{value}%'
      },
      data: [{ value: props.value }]
    }]
  }
  
  chart.setOption(option)
})
</script>